<template>
  <div class="gather">
    <div class="content">
      <div class="upData_tiem">
        <!--柬埔寨疫情-->
        <span
          ><img src="@/assets/img/tips@2x.png" alt="fighting! " />{{
            $t('Cambodia_epidemic')
          }}</span
        >
        <!--数据更新至-->
        <span v-if="$store.state.locale == 'zh' && Gather.data_update_to"
          >{{ $t('Data_update_to') }}
          {{ Gather.data_update_to | dateFtt('yyyy-MM-dd hh:mm') }}</span
        >
        <span v-if="$store.state.locale != 'zh' && Gather.data_update_to"
          >{{ $t('Data_update_to') }}
          {{ Gather.data_update_to | dateFtt('MM/dd/yyyy hh:mm') }}</span
        >
      </div>
      <div v-if="Gather.data_update_to" class="data_body">
        <div class="data_table">
          <div class="data_item">
            <!--现有确诊-->
            <p class="title">{{ $t('Total_cases') }}</p>
            <p class="today_data" v-if="Gather.confirmed_diagnosis">
              {{ Gather.confirmed_diagnosis.today }}
            </p>
            <!--今日-->
            <p class="yesterday_data">
              {{ $t('today')
              }}<span v-if="Gather.confirmed_diagnosis"
                >+{{ Gather.confirmed_diagnosis.yesterday_data }}</span
              >
            </p>
          </div>
          <div class="data_item">
            <!--累计治愈-->
            <p class="title">{{ $t('Accumulated_recoveries') }}</p>
            <p class="today_data cure" v-if="Gather.accumulated_recoveries">
              {{ Gather.accumulated_recoveries.today }}
            </p>
            <!--今日-->
            <p class="yesterday_data">
              {{ $t('today')
              }}<span class="cure" v-if="Gather.accumulated_recoveries"
                >+{{ Gather.accumulated_recoveries.yesterday_data }}</span
              >
            </p>
          </div>
          <div class="data_item">
            <!--死亡病例-->
            <p class="title">{{ $t('Death_toll_case') }}</p>
            <p class="today_data die" v-if="Gather.death_toll_case">
              {{ Gather.death_toll_case.today }}
            </p>
            <!--今日-->
            <p class="yesterday_data">
              {{ $t('today')
              }}<span class="die" v-if="Gather.death_toll_case"
                >+{{ Gather.death_toll_case.yesterday_data }}</span
              >
            </p>
          </div>
        </div>
        <!--点击查看更多疫情信息 arrow_right D1@2x.png-->
        <div class="more_epidemic" @click="moreEpidemic">
          {{ $t('Click_to_see_more_epidemic_information') }}
          <img src="@/assets/img/arrow_right D1@2x.png" alt="more" />
        </div>
      </div>
    </div>
    <!-- loding 页面+报错页面 -->
    <div v-if="!Gather.data_update_to" class="loadding">
      <van-loading v-if="loading" type="spinner" />
      <div v-if="error" class="error-tip">
        <img src="@/assets/img/no-wifi@2x.png" alt="error" />
        <p>{{ $t('net_slow') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getKHData } from '@/ajax/service';
export default {
  name: 'Gather',
  data() {
    return {
      loading: true,
      error: false,
      Gather: {}
    };
  },
  mounted() {
    this.getEpidemicData();
  },
  methods: {
    //跳转疫情分享
    moreEpidemic() {
      location.href = `${process.env.YIQING_WEB_URL}?l=${
        this.$store.state.locale == 'zh' ? 'zh' : 'km'
      }`;
    },
    //获取疫情数据
    getEpidemicData() {
      this.error = false;
      this.loading = true;
      getKHData()
        .then(result => {
          console.log(result);
          if (result.state == 1) {
            this.Gather = result.result.gather;
            this.loading = false;
          } else {
            this.loading = false;
            this.error = true;
          }
        })
        .catch(error => {
          this.loading = false;
          this.error = true;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.gather {
  width: 100%;
  padding: 30px 0 38px 0;
  .upData_tiem {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0px 0 8px;
    font-size: 24px;
    color: rgba(12, 12, 28, 0.7);
    span {
      display: inline-block;
    }
    img {
      display: inline-block;
      width: 32px;
      height: 32px;
      padding-bottom: 6px;
    }
  }
  .data_body {
    background: rgba(12, 12, 28, 0.08);
    border-radius: 8px;
    padding: 32px 30px;
  }
  .data_table {
    width: 100%;
    display: flex;
    justify-content: space-between;
    //  padding: 0 0 48px 0;
    .data_item {
      width: 210px;
      .title {
        font-size: 24px;
        color: rgba(12, 12, 28, 1);
        line-height: 32px;
      }
      .today_data {
        font-size: 32px;
        font-weight: normal;
        color: rgba(253, 75, 73, 1);
        line-height: 48px;
        margin: 4px 0;
      }
      .yesterday_data {
        font-size: 20px;
        color: rgba(12, 12, 28, 0.7);
        line-height: 24px;
        span {
          color: rgba(250, 70, 70, 1);
        }
        .cure {
          color: #38c838;
        }
        .die {
          color: rgba(12, 12, 28, 0.7);
        }
      }
      .cure {
        color: #38c838;
      }
      .die {
        color: rgba(12, 12, 28, 0.7);
      }
    }
  }
  .more_epidemic {
    width: 100%;
    height: 64px;
    line-height: 64px;
    margin: 32px auto 0px;
    background: rgba(250, 70, 70, 1);
    border-radius: 40px;
    font-size: 28px;
    font-weight: normal;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    img {
      display: inline-block;
      width: 32px;
      height: 32px;
      padding-bottom: 3px;
    }
  }
  .loadding {
    width: 100%;
    height: 280px;
    line-height: 300px;
    text-align: center;
    .error-tip {
      width: 100%;
      text-align: center;
      img {
        width: 128px;
        margin: 50px auto 8px;
      }
      p {
        font-size: 28px;
        /*font-weight: 400;*/
        color: rgba(12, 12, 28, 0.7);
        line-height: 40px;
      }
    }
  }
}
</style>
